<template>
  <div class="mx-container">
    <zz-sub-nav :list="list" :index.sync="index" id="main1">
      <div class="sub-nav-content">
        <div>
          <div class="details-title">{{ $t("zz.hot_menu") }}</div>
          <div class="flex-3">
            <div class="flex-3-item" v-for="(it, i) in comboList" :key="i">
              <div class="DDOS-card">
                <div class="DDOS-card-title">
                  <h6>{{ it.name }}</h6>
                  <div class="DDOS-card-money">
                    {{ $t("zz.per_month") }} {{priceUnit}}
                    <span class="money-importent">{{ it.money | conversionPrice}}</span>
                    <s>{{priceUnit}}{{ it.money * 1.2 | conversionPrice}}/{{ $t("zz.month") }}</s>
                  </div>
                </div>
                <div class="DDOS-card-body">
                  <table class="DDOS-body-table">
                    <tr>
                      <th valign="top">
                        {{ $t("zz.server.realTime.hotMenu.DDoSHigh") }} :
                      </th>
                      <td>{{ it.ddos }}G</td>
                    </tr>
                    <tr>
                      <th>{{ $t("zz.server.realTime.hotMenu.CC") }} :</th>
                      <td>{{ it.cc }}</td>
                    </tr>
                    <tr>
                      <th>
                        {{ $t("zz.server.realTime.hotMenu.broadband") }} :
                      </th>
                      <td>{{ it.broadband }}</td>
                    </tr>
                    <tr>
                      <th>{{ $t("zz.server.realTime.hotMenu.num") }} :</th>
                      <td>{{ it.num }}</td>
                    </tr>
                    <tr>
                      <th>
                        {{ $t("zz.server.realTime.hotMenu.tamper-proofing") }} :
                      </th>
                      <td>{{ it.tamper }}</td>
                    </tr>
                    <tr>
                      <th valign="top">
                        {{ $t("zz.server.realTime.hotMenu.WAF") }} :
                      </th>
                      <td>{{ it.WAF }}</td>
                    </tr>

                    <tr>
                      <th valign="top">
                        {{ $t("zz.server.realTime.hotMenu.territory") }} :
                      </th>
                      <td>{{ $t("zz.server.realTime.hotMenu.global") }}</td>
                    </tr>
                  </table>
                </div>
                <div class="DDOS-card-footer">
                  <div class="zz-btn btn-empty btn-blue" @click="handleBuy(it)">
                    {{ $t("zz.buy_now") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{ $t("zz.product_presentation") }}</div>
          <p>
            {{ $t("zz.server.realTime.intro") }}
          </p>
          <img
            :src="require('@/assets/img/vulnerability/vulnerability1-1.png')"
            alt=""
            class="marginTop"
          />
        </div>
        <div>
          <div class="details-title">{{ $t("zz.product_superiority") }}</div>
          <div class="pro-pailie-wrap">
            <div class="flex-2">
              <div class="flex-2-item">
                <h6>
                  <img
                    :src="
                      require('@/assets/img/cloudSecurity/cloudSecurity2-1.png')
                    "
                    alt=""
                  />
                  {{ $t("zz.server.realTime.superiority.name1") }}
                </h6>
                <p>
                  {{ $t("zz.server.realTime.superiority.intro1") }}
                </p>
              </div>
              <div class="flex-2-item">
                <h6>
                  <img
                    :src="
                      require('@/assets/img/cloudSecurity/cloudSecurity2-2.png')
                    "
                    alt=""
                  />
                  {{ $t("zz.server.realTime.superiority.name2") }}
                </h6>
                <p>
                  {{ $t("zz.server.realTime.superiority.intro2") }}
                </p>
              </div>
              <div class="flex-2-item">
                <h6>
                  <img
                    :src="
                      require('@/assets/img/cloudSecurity/cloudSecurity2-3.png')
                    "
                    alt=""
                  />
                  {{ $t("zz.server.realTime.superiority.name3") }}
                </h6>
                <p>
                  {{ $t("zz.server.realTime.superiority.intro3") }}
                </p>
              </div>
              <div class="flex-2-item">
                <h6>
                  <img
                    :src="
                      require('@/assets/img/cloudSecurity/cloudSecurity2-4.png')
                    "
                    alt=""
                  />
                  {{ $t("zz.server.realTime.superiority.name4") }}
                </h6>
                <p>
                  {{ $t("zz.server.realTime.superiority.intro4") }}
                </p>
              </div>
              <div class="flex-2-item">
                <h6>
                  <img
                    :src="
                      require('@/assets/img/cloudSecurity/cloudSecurity2-5.png')
                    "
                    alt=""
                  />
                  {{ $t("zz.server.realTime.superiority.name5") }}
                </h6>
                <p>{{ $t("zz.server.realTime.superiority.intro5") }}</p>
              </div>
              <div class="flex-2-item">
                <h6>
                  <img
                    :src="
                      require('@/assets/img/cloudSecurity/cloudSecurity2-6.png')
                    "
                    alt=""
                  />
                  {{ $t("zz.server.realTime.superiority.name6") }}
                </h6>
                <p>
                  {{ $t("zz.server.realTime.superiority.intro6") }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{ $t("zz.sub_product") }}</div>
          <div class="flex-3">
            <div class="flex-3-item">
              <zz-card position="top" border>
                <span slot="title">{{
                  $t("zz.server.realTime.sub.name1")
                }}</span>
                <p slot="content">{{ $t("zz.server.realTime.sub.intro1") }}</p>
                <img
                  src="@/assets/img/cloudSecurity/cloudSecurity3-1.png"
                  slot="img"
                  style="width: 54px"
                  alt=""
                />
              </zz-card>
            </div>
            <div class="flex-3-item">
              <zz-card position="top" border>
                <span slot="title">{{
                  $t("zz.server.realTime.sub.name2")
                }}</span>
                <p slot="content">{{ $t("zz.server.realTime.sub.intro2") }}</p>
                <img
                  src="@/assets/img/cloudSecurity/cloudSecurity3-2.png"
                  slot="img"
                  style="width: 54px"
                  alt=""
                />
              </zz-card>
            </div>
            <div class="flex-3-item">
              <zz-card position="top" border>
                <span slot="title">{{
                  $t("zz.server.realTime.sub.name3")
                }}</span>
                <p slot="content">{{ $t("zz.server.realTime.sub.intro3") }}</p>
                <img
                  src="@/assets/img/cloudSecurity/cloudSecurity3-3.png"
                  slot="img"
                  style="width: 54px"
                  alt=""
                />
              </zz-card>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{ $t("zz.scheme_value") }}</div>
          <div class="flex-3">
            <div class="flex-3-item">
              <zz-card position="top" border>
                <span slot="title">{{
                  $t("zz.server.realTime.value.name1")
                }}</span>
                <p slot="content">
                  {{ $t("zz.server.realTime.value.intro1") }}
                </p>
                <img
                  src="@/assets/img/cloudSecurity/cloudSecurity4-1.png"
                  slot="img"
                  style="width: 54px"
                  alt=""
                />
              </zz-card>
            </div>
            <div class="flex-3-item">
              <zz-card position="top" border>
                <span slot="title">{{
                  $t("zz.server.realTime.value.name2")
                }}</span>
                <p slot="content">
                  {{ $t("zz.server.realTime.value.intro2") }}
                </p>
                <img
                  src="@/assets/img/cloudSecurity/cloudSecurity4-2.png"
                  slot="img"
                  style="width: 54px"
                  alt=""
                />
              </zz-card>
            </div>
            <div class="flex-3-item">
              <zz-card position="top" border>
                <span slot="title">{{
                  $t("zz.server.realTime.value.name3")
                }}</span>
                <p slot="content">
                  {{ $t("zz.server.realTime.value.intro3") }}
                </p>
                <img
                  src="@/assets/img/cloudSecurity/cloudSecurity4-3.png"
                  slot="img"
                  style="width: 54px"
                  alt=""
                />
              </zz-card>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{ $t("zz.application_scenarios") }}</div>
          <div class="marginTitle">
            <zz-card position="right">
              <span slot="title">{{ $t("zz.server.realTime.use.name1") }}</span>
              <p slot="content">{{ $t("zz.server.realTime.use.intro1") }}</p>
              <img
                src="@/assets/img/cloudSecurity/cloudSecurity5-1.png"
                slot="img"
                alt=""
              />
            </zz-card>
          </div>
          <div class="marginTitle">
            <zz-card position="right">
              <span slot="title">{{ $t("zz.server.realTime.use.name2") }}</span>
              <p slot="content">{{ $t("zz.server.realTime.use.intro2") }}</p>
              <img
                src="@/assets/img/cloudSecurity/cloudSecurity5-2.png"
                slot="img"
                alt=""
              />
            </zz-card>
          </div>
          <div class="marginTitle">
            <zz-card position="right">
              <span slot="title">{{ $t("zz.server.realTime.use.name3") }}</span>
              <p slot="content">{{ $t("zz.server.realTime.use.intro3") }}</p>
              <img
                src="@/assets/img/cloudSecurity/cloudSecurity5-3.png"
                slot="img"
                alt=""
              />
            </zz-card>
          </div>
          <div class="marginTitle">
            <zz-card position="right">
              <span slot="title">{{ $t("zz.server.realTime.use.name4") }}</span>
              <p slot="content">{{ $t("zz.server.realTime.use.intro4") }}</p>
              <img
                src="@/assets/img/cloudSecurity/cloudSecurity5-4.png"
                slot="img"
                alt=""
              />
            </zz-card>
          </div>
        </div>
      </div>
    </zz-sub-nav>
  </div>
</template>

<script>
import SubNav from "@/components/SubNav/index.vue";
import ZzCard from "@/components/ZzCard";
import Bus from "@/bus.js";
import { priceUnit } from '@/utils/branch'

export default {
  data() {
    return {
      index: 1,
      priceUnit,
    };
  },

  components: {
    "zz-sub-nav": SubNav,
    ZzCard,
  },
  props: {},
  mounted() {},
  computed: {
    activeItem: function () {
      let activeItem = this.list.find((v) => v.index == this.index);
      return activeItem;
    },
    list: function () {
      return [
        {
          name: this.$t("zz.hot_menu"),
          index: 1,
          title: this.$t("zz.hot_menu"),
        },
        {
          name: this.$t("zz.product_presentation"),
          index: 2,
          title: this.$t("zz.product_presentation"),
        },
        {
          name: this.$t("zz.product_superiority"),
          index: 3,
          title: this.$t("zz.product_superiority"),
        },
        { name: this.$t("zz.sub_product"), index: 4 },
        { name: this.$t("zz.scheme_value"), index: 5 },
        { name: this.$t("zz.application_scenarios"), index: 6 },
      ];
    },
    comboList: function () {
      return [
        {
          name:
            this.$t("zz.server.realTime.hotMenu.name") +
            this.$t("zz.server.realTime.hotMenu.name1"),
          money: 10600,
          ddos: 100,
          cc: 10000,
          broadband: "10M",
          num: 10,
          WAF: this.$t("zz.server.realTime.hotMenu.support"),
          tamper: this.$t("zz.server.realTime.hotMenu.advanced"),
        },
        {
          name:
            this.$t("zz.server.realTime.hotMenu.name") +
            this.$t("zz.server.realTime.hotMenu.name2"),
          money: 21500,
          ddos: 100,
          cc: 10000,
          broadband: "30M",
          num: 50,
          WAF: this.$t("zz.server.realTime.hotMenu.support"),
          tamper: this.$t("zz.server.realTime.hotMenu.advanced"),
        },
        {
          name:
            this.$t("zz.server.realTime.hotMenu.name") +
            this.$t("zz.server.realTime.hotMenu.name3"),
          money: 38900,
          ddos: 1000,
          cc: 30000,
          broadband: "50M",
          num: 100,
          WAF: this.$t("zz.server.realTime.hotMenu.support"),
          tamper: this.$t("zz.server.realTime.hotMenu.advanced"),
        },
      ];
    },
  },
  watch: {},
  methods: {
    handleBuy(a_it) {
      Bus.$emit("serveFun", a_it);
    },
  },
  destroyed() {},
};
</script>
<style lang='scss' scoped>
@import "@/style/variables.scss";

.sub-nav-content {
  padding: 12px 48px;
  flex: 1;
  width: 100%;
  .pro-title {
    color: $color;
    font-size: 20px;
    padding: 20px 45px;
    border-bottom: 1px solid $border;
  }
  .pro-intro-wrap {
    padding: 30px 48px;
  }
  img {
    max-width: 100%;
  }
}
.son-pro-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  & > div {
    width: 238px;
  }
}
.pro-pailie-wrap {
  .flex-2 {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    & > div {
      width: 40%;
      margin: 0 5% 50px 0;
      img {
        margin-top: 0;
        width: 32px;
        margin-right: 10px;
      }
      h6 {
        font-size: 22px;
        line-height: 32px;
        margin: 15px 0 20px;
      }
      p {
        font-size: 14px;
        line-height: 25px;
      }
    }
  }
}

.DDOS-card {
  padding: 25px 20px;
  border-right: 1px solid $border;
  .DDOS-card-title {
    border-bottom: 1px solid $border;
    padding-bottom: 15px;
    h6 {
      text-align: center;
      font-weight: bold;
      font-size: 20px;
    }
    .DDOS-card-money {
      text-align: center;
      color: $red;
      .money-importent {
        font-weight: bold;
        color: $red;
        font-size: 20px;
      }
      s {
        color: $subColor;
      }
    }
  }
  .DDOS-card-body {
    padding: 25px 0 25px;
    .DDOS-body-table {
      margin: 0 auto;
      tr {
        th,
        td {
          line-height: 25px;
          text-align: right;
          width: 50%;
          font-weight: normal;
          color: #999;
          padding-bottom: 10px;
        }
        td {
          width: 40%;
          text-align: left;
          padding-left: 10px;
          font-weight: bold;
          color: #000;
        }
      }
    }
  }

  .DDOS-card-footer {
    width: 90%;
    margin: 0 auto;
  }
}
.flex-3 {
  margin: 0 -15px;
  .flex-3-item {
    margin-right: 0;
    width: 33.3%;

    &:last-child {
      .DDOS-card {
        border-right: none;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .pro-pailie-wrap {
    margin-top: 0;
    .flex-2 {
      & > div {
        h6 {
          font-size: 0.4rem;
          margin: 0.3rem 0.2rem 0;
        }
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
  }

  .flex-3 {
    margin: 0 -15px;
    .flex-3-item {
      margin: 0 auto;
      width: 80%;
      .DDOS-card {
        border-right: none;
      }
      &:last-child {
      }
    }
  }

  .DDOS-card {
    padding: 25px 20px;
    border-right: 1px solid $border;
    .DDOS-card-title {
      border-bottom: 1px solid $border;
      padding-bottom: 15px;
      h6 {
        text-align: center;
        font-weight: bold;
        font-size: 20px;
      }
      .DDOS-card-money {
        text-align: center;
        color: $red;
        .money-importent {
          font-weight: bold;
          color: $red;
          font-size: 20px;
        }
        s {
          color: $subColor;
        }
      }
    }
    .DDOS-card-body {
      padding: 0.3rem 0;
      .DDOS-body-table {
        margin: 0 auto;
        tr {
          th,
          td {
            width: 50%;
            padding-bottom: 0.1rem;
          }
        }
      }
    }
  }
}
</style>